import React, { useState } from 'react'
import Nav from "../../component/Nav/index"
import { TextArea } from 'antd-mobile/2x'
import { ImageUploader, Toast, Button } from 'antd-mobile/2x'
import api from '../../api/share'
export default function AddShare(props) {
    const { goBack } = props.history;
    const maxCount = 3
    const [fileList, setFileList] = useState([])
    const [content, setContent] = useState("")
    const mockUpload = async (file) => {
        const formData = new FormData();
        formData.append("file", file);
        let res = await api.upload(formData)
        if (res.success) {
            Toast.show({
                content: "上传成功"
            })

        }
        return {
            url: res.data.url,
        }
    }
    const delImg = (file) => {
        api.upload({ name: file.url.split("/")[3] }).then(res => {
            if (res.success) {
                Toast.show({
                    content: "删除成功"
                })
            }
        })
    }
    const addShare = () => {
        const user = JSON.parse(localStorage.getItem("user"))
        let img = fileList.map(v => {
            return v.url
        })
        img = img.join(",");
        api.addShare({ content, name: user.nickname, user_id: user.id, img, headImg: user.headImg }).then(res => {
            if (res.success) {
                Toast.show({
                    content: "发布成功"
                })
                goBack()
            }
        })
    }
    return (
        <div>
            <Nav>发布动态</Nav>
            <div style={{
                padding: "10px",
                marginBottom: "20px"
            }}>
                <h3>动态文案</h3>
                <TextArea
                    value={content}
                    onChange={(e) => setContent(e)}
                    defaultValue={'北极星垂地，\n东山月满川。'}
                    showCount
                    maxLength={100}
                    style={{
                        "--font-size": "20px",
                        border: "2px solid #ccc",
                        padding: "10px",
                        marginTop: "10px"
                    }}
                />
            </div>

            <div style={{
                padding: "10px",
                marginBottom: "20px"
            }}>
                <h3>动态图片</h3>
                <ImageUploader
                    value={fileList}
                    onChange={setFileList}
                    upload={mockUpload}
                    multiple
                    onDelete={delImg}
                    maxCount={3}
                    showUpload={fileList.length < maxCount}
                    onCountExceed={exceed => {
                        Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`)
                    }}
                />
            </div>
            <Button block shape='rectangular' color='primary' style={{
                position: "fixed",
                bottom: "0",
                height: "100px"
            }}
                onClick={() => addShare()}>
                发布
            </Button>

        </div>
    )
}
